<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <svg
        t="1678514485802"
        style="width: 14px; height: 14px"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3084"
        width="200"
        height="200"
      >
        <path
          d="M508.8 44.8c-256 0-464 208-464 464s208 464 464 464 464-208 464-464S764.8 44.8 508.8 44.8zM508.8 924.8c-230.4 0-416-185.6-416-416s185.6-416 416-416 416 185.6 416 416S739.2 924.8 508.8 924.8z"
          p-id="3085"
          fill="#8a8a8a"
        ></path>
        <path
          d="M521.6 652.8c12.8 0 22.4-9.6 22.4-22.4l0-428.8c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 428.8C496 640 508.8 652.8 521.6 652.8z"
          p-id="3086"
          fill="#8a8a8a"
        ></path>
        <path
          d="M521.6 748.8m-35.2 0a1.1 1.1 0 1 0 70.4 0 1.1 1.1 0 1 0-70.4 0Z"
          p-id="3087"
          fill="#8a8a8a"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span class="main-title">123221</span>
      <span class="main-content">17.11</span>
      <svg
        style="padding-top: 5px"
        t="1678517997248"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="11666"
        width="16"
        height="16"
      >
        <path
          d="M583.93 296.842l234.8 318.515a73.059 73.059 0 0 1-14.99 102.048l-2.62 1.806a78.116 78.116 0 0 1-44.612 13.908h-469.6a75.588 75.588 0 0 1-76.762-74.414 72.878 72.878 0 0 1 14.269-43.348l234.8-318.515a78.568 78.568 0 0 1 106.834-16.888 77.574 77.574 0 0 1 17.881 16.888z"
          p-id="11667"
          fill="#d81e06"
        ></path>
      </svg>
      <svg
        style="padding-top: 5px"
        t="1678517732225"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7070"
        width="16"
        height="16"
      >
        <path
          d="M458.854 701.962l-234.8-318.605a73.059 73.059 0 0 1 15.262-102.048l2.619-1.806a78.026 78.026 0 0 1 44.612-13.817h469.6a75.588 75.588 0 0 1 76.762 74.413 72.246 72.246 0 0 1-14.269 43.258l-234.8 318.605a78.477 78.477 0 0 1-107.195 17.25 77.213 77.213 0 0 1-17.791-17.25z"
          p-id="7071"
          fill="#1afa29"
        ></path>
      </svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lineCharts",
  mounted() {
    // 初始化echarts实例
    let lineCharts = this.$echarts.init(this.$refs.charts);
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        show: false, //隐藏x轴
        type: "category", //均分
      },
      yAxis: {
        show: false, //隐藏y轴
      },
      // 系列
      series: [
        // 折线图
        {
          type: "line",
          data: [1, 50, 10, 68, 99, 45, 58, 12, 99],
          // 拐点样式
          itemStyle: { opacity: 0 },
          // 平滑曲线
          smooth: true,
          // 线条样式
          lineStyle: {
            color: "#0db8ec",
          },
          // 填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#0db8ec", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],

      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header span {
  color: #797777;
  margin-right: 14px;
}
.header svg {
  vertical-align: middle;
}
.main {
  margin: 10px 0;
}
.main-title {
  margin-right: 20px;
  font-size: 25px;
}
.main-content {
  color: #797777;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>